<template>
	<view>
		<!-- 个人添加 -->
		<uni-popup ref="popupTemplate" background-color="#fff">
			<view class="fixed_header">
				<p class="per_title" style="padding:20rpx;"> <i class="iconfont">&#xe67e;</i>请选择在线模板</p>
				<!-- 搜索框 -->
				<view class="swip_header">
					<view class="slot-box">
						<view style="width: 100%;">
							<uni-search-bar v-model="searchValue" type="text" @confirm="handleQuery"
								@input="handleQuery" placeholder="请搜索模板名称" />
						</view>
					</view>
				</view>
			</view>

			<scroll-view class="scroll_view" v-if="templateList.length !== null" scroll-y="true" lower-threshold="5"
				@scrolltolower="scrollLower">
				<view @click="getTemplateId(item)" v-for="(item, index) in templateList" :key="index"
					class="table_view">
					<view class="table_span">
						<span class="contract_Name">{{item.name}}</span>
					</view>
					<view class="table_span" style="font-size: 26rpx;color: #666666;">
						<span>签署参与方：{{item.signMax}}个</span>
						<template v-for="(dictItem, index) in dicts.ec_contract_template_sign_set">
						  <template v-if="item.signSet == dictItem.value">
						    <uni-tag :text="dictItem.text" size="small" :type="dictItem.type"/>
						  </template>
						</template>
					</view>
				</view>
				<uni-load-more status="contentnomore"></uni-load-more>
			</scroll-view>

			<!-- 暂无数据 -->
			<luanqingEmpty :show="true" text="没有更多数据啦" v-else />
		</uni-popup>
	</view>
</template>

<script>
	import {getDictsByNameForUni} from "@/utils/dicts";
	import luanqingEmpty from '@/components/luanqing-empty/luanqing-empty'
	import {selectAvailableTemplates} from "@/api/ec/console/busiConfig/template";

	export default {
		name: "selectTemplate",
		components: {luanqingEmpty},
		props: {
		   contractSignProcessTemplateId: {
		     type: Number,
		     default: 0,
		   },
		 }, 
		data() {
			return {
				// 数据字典
				dicts: {
					ec_contract_template_sign_set: [],
				},
				form: {}, // 表单参数
				loading: false,
				searchValue: '', //搜索框内容
				styles: {
					color: "#00a660"
				},
				templateList: [],
				type: 'bottom',
				// 查询参数
				queryParams: {
				  pageNum: 1,
				  pageSize: 10,
				  companyId: null,
				  staffId: null,
				  name: null,
				  status: null,
				  contractNumber: null,
				  params:{
								
				  }
				},      
			};
		},
		created() {
			this.getList();
			this.getDicts();
		},
		methods: {
			/**加载数据字典*/
			getDicts() {
			  this.dicts.ec_contract_template_sign_set = getDictsByNameForUni("ec_contract_template_sign_set");
			},
			scrollLower() {
				this.queryParams.pageSize++;
				this.getList()
			},
			open(type) {
				this.$refs.popupTemplate.open(type)
				this.getList();
			},
			/** 查询合同模板列表 */
			getList() {
				this.queryParams.params.contractSignProcessTemplateId=this.contractSignProcessTemplateId;
				selectAvailableTemplates(this.queryParams).then(response => {
					this.templateList = response.rows;
				});
			},
			/**搜索*/
			handleQuery() {
				if (this.searchValue == '') {
					this.$modal.msgError("请输入搜索内容")
					return
				}
					this.queryParams.name = this.searchValue;
					this.getList()
			},
			/**重置*/
			resert() {
				this.queryParams.name = '',
				this.getList()
			},
			/** 选择使用联系人 */
			getTemplateId(item) {
				this.$emit('getTemplateId', {
					item
				})
				this.$refs.popupTemplate.close()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.template_name {
		overflow: hidden;
		white-space: normal;
		text-overflow: ellipsis;
		-webkit-line-clamp: 1; //显示行数
		display: -webkit-box;
		/*作为弹性伸缩盒子模型显示*/
		-webkit-box-orient: vertical;
		/*伸缩盒子的排列方式：从上到下垂直*/
		width: 48%;
	}

	.scroll_view {
		margin-top: 200rpx;
		overflow-y: scroll;
		height: 850rpx;
		width: 100%;
	}

	.fixed_header {
		position: fixed;
		top: 0;
		width: 100%;
	}

	.table_view {
		border-bottom: 1rpx solid #ebeef5;
		padding: 15rpx 20rpx 15rpx 0;
		margin: 0 20rpx;
	}

	.table_span {
		margin-top: 15rpx;
		display: flex;
		align-items: center;
		color: #000;
		justify-content: space-between;
	}

	.per_title {
		font-size: 30rpx;
		color: #666666;
		border-bottom: 1rpx solid #d3d3d3;
		padding-bottom: 16rpx;

		.iconfont {
			padding-right: 6rpx;
		}
	}

	.dialog_search {
		display: flex;
		margin: 30rpx 10rpx;

		button {
			font-size: 26rpx;
			border: 1rpx solid $uni-color-primary;
			background: #fff;
			color: $uni-color-primary;
			padding: 0 32rpx;
		}
	}
</style>